import React, { FC, useEffect, useState } from 'react'
import ChartLine from '@/components/pages/chartLine'
import ChartPie from '@/components/pages/chartPie'
import ChartColumn from '@/components/pages/chartColumn'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import StoreInfo from '@/components/pages/material/storeInfo'
import { inject, observer } from "mobx-react";
import chinaMap from '@/assert/images/salesAnalysis/china.png'
import nanhai_sea from '@/assert/images/salesAnalysis/nanhai_sea.png'
import backFrame from '@/assert/images/customer/backFrame.png'
import home_bg_url from '@/assert/images/home_bg.png'
import { IGoodStoreFull, IMaterialStoreFull } from '@/types/pages/materialStore/interface'


const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction: column;
      .sale{
        flex:1 1 55%;
        display: flex;
        flex-direction: column;
        background: url(${backFrame});
        background-size: 100% 100%;
        .top{
          flex:1;
          display: flex;
          flex-direction: row;
          .sale-count,.sale-contract{
            flex:1
           } 
        }
        .bottom{
          flex:1;
          display: flex;
          flex-direction: row;
          .sale-count,.sale-contract{ 
            flex:1;
          }
        }
   
      }
      .map{
        flex:1 1 45%;
        position:relative;
        background-image: url(${backFrame});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .map-content{
        width: 100%;
        height: 100%;
        background-image: url(${chinaMap});
        background-position-x: 30%;
        background-position-y: 30%;
        background-size: 80% 80%;
        background-repeat: no-repeat;
      }
      .map-content:after{
        content: "";
        position: absolute;
        width: 10.2rem;
        height: 14.1rem;
        bottom: 6rem;
        right: 6rem;
        background-image: url(${nanhai_sea});
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
      }
    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column;
      .chart-pie{
        flex:1 1 55%; 
        display: flex;
        .left-pie,.right-pie{
          flex:1;
        }
      }
      .chart-line{
        flex:1 1 45%; 
      }
    }
`

const Content: FC<{}> = function () {
  const store = useStores();
  const { materialStoreList, materialPie, tendencyLine, overstockGauge, wranInfo } = store.goodStore.screenData;
  const fnCallBack: FnCallBack = (data: Partial<IGoodStoreFull>) => {
    store.header.srtScreenData(data);
    store.header.setHeaderName('物资仓库');
    document.title = '物资仓库';
  };
  useEffect(() => {
    store.sale.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.goodStore.getScreenData(type, date)
      fnCallBack<Partial<IGoodStoreFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='sale'>
          <div className='top'>
            <div className='sale-count'>
              <StoreInfo titleTop='5rem' portTop='8rem' {...materialStoreList.begin} img={home_bg_url} />
            </div>
            <div className='sale-contract' >
              <StoreInfo titleTop='5rem' portTop='8rem' img={home_bg_url}    {...materialStoreList.end} />
            </div>
          </div>
          <div className='bottom'>
            <div className='sale-count'>
              <StoreInfo titleTop='-3rem' img={home_bg_url}     {...materialStoreList.in} />
            </div>

            <div className='sale-contract'>
              <StoreInfo titleTop='-3rem' img={home_bg_url}    {...materialStoreList.out} />
            </div>
          </div>
        </div>
        <div className='map' >
          <ChartColumn title={wranInfo.title!} dataset={wranInfo.dataset} />
        </div>
      </div>
      <div className='right'>
        <div className='chart-pie'>
          <div className='left-pie'>
            <ChartPie title={materialPie.title!} dataset={materialPie.dataset} />
          </div>
          <div className='right-pie'>
            <ChartPie title={overstockGauge.title!} dataset={overstockGauge.dataset} />
          </div>
        </div>
        <div className='chart-line'>
          <ChartLine title={tendencyLine.title!} dataset={tendencyLine.dataset!} />
        </div>
      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
